<template>
    <h2>访问数据仓库中已有的正常数据</h2>
    <p>{{ id }}</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ gender }}</p>
    <p>{{ user }}</p>
    <p>user:{{ user.id }}--{{ user.username }}--{{ user.password }}</p>
    <p>student:{{ student.id }}--{{ student.name }}--{{ student.age }}--{{ student.gender }}</p>
    <p>emp:{{ emp.id }}--{{ emp.name }}--{{ emp.salary }}</p>
    <p>{{ hobbies }}</p>
    <p>{{ hobbies[0] }}--{{ hobbies[1] }}--{{ hobbies[2] }}</p>
    <button @click="f1">测试ref</button><br>
    <button @click="f2">测试reactive</button>

    <!-- 
        对于非正常数据而言,null与undefined在页面中是以空字符串的方式展示的
        NaN是正常展示的
        对于仓库中没有的数据,也取不到值,默认展示空字符串
    -->
    <h2>访问非正常数据</h2>
    <p>{{ s1 }}</p>
    <p>{{ s2 }}</p>
    <p>{{ s3 }}</p>
    <p>{{ s4 }}</p>

    <h2>js表达式</h2>
    <p>{{ num1+num2 }}</p>
    <p>{{ num1-num2 }}</p>
    <p>{{ num1*num2 }}</p>
    <p>{{ num1/num2 }}</p>
    <p>{{ num1%num2 }}</p>
    <p>{{ num1 > num2 ? "大于" : "不大于" }}</p>
    <p>{{ num1 > num2 && num1 < num2 }}</p>
    <p>{{ num1 > num2 || num1 < num2 }}</p>
    <p>{{ true && true }}</p>
    <p>{{ true }}</p>
    <p>{{ false }}</p>
    <p>{{ 100 }}</p>
    <!-- 加上引号,表示直接赋值,否则默认在数据仓库中找到指定key的数据 -->
    <p>{{ 'id' }}</p>
    <p>{{ id }}</p>

    <h2>js内置对象</h2>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</template>

<script setup>
import { ref,reactive } from 'vue';

const id = ref(2)
const name = ref("张三")
const age = ref(18)
const gender = ref('男')
// 数组或者集合使用中括号
const hobbies = ref(['吃饭','睡觉','打豆豆'])
// 对象类型使用大括号
const user = ref({id:1,username:'admin',password:'123456'})
// const student = ref({id:id,name:name,age:age,gender:gender})
// 当key与value同名时,可以简写成一个即可
const student = ref({id,name,age,gender})

const emp = reactive({id,name,salary:8000})

function f1(){
    console.log(user.value.id)
}

function f2(){
    console.log(emp.name)
}
user.value = ref({id,username:'jack',password:'123456'})
// emp = reactive({id:8,name,salary:10000})    // 报错,不能替换整个对象
emp.id = 8;

const s1 = ref(null)
const s2 = ref(undefined)
const s3 = ref(NaN)

const num1 = ref(3)
const num2 = ref(2)

</script>